<template>
<div>
  <div class=" search">
    <input type="text" placeholder="输入城市或者拼音" v-model="input">
  </div>
  <div class="search-content" ref="search" v-show="this.input">
      <ul>
        <li v-for="item of List" class="search-item
        border-bottom"
        >
          {{item.name}}
        </li>
        <li class="search-item
        border-bottom" v-show="shownoshow">
          没有找到对应的城市
        </li>
      </ul>
  </div>
</div>

</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: 'Search',
    props:{
     cities:Object
    },
    data(){
      return{
        input:'',
        List:[],
        timer:null
      }
    },
    computed:{
      shownoshow(){
        return !this.List.length
      }
    },
    watch:{
      input(){
          if (this.timer){
            clearTimeout(this.timer)
          }
          if (!this.input){
            this.List=[]
            return
          }
          this.timer=setTimeout(()=>{
            const result=[]
            for(let i in this.cities){
              this.cities[i].forEach(e=>{
                if (e.name.indexOf(this.input)>-1||e.spell.indexOf(this.input)>-1){
                  result.push(e)
                }
                this.List=result
              })
            }
          },1)
      }
    },
    mounted() {
      this.scroll=new BScroll(this.$refs.search)
    }

  }

</script>


<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .search
    height: .8rem
    line-height:.8rem
    background-color: $bgColor
    padding: .1rem
    input
      height: .7rem
      width: 100%
      line-height: .7rem
      padding-left: .1rem
      box-sizing border-box
      border-radius .1rem
  .border-bottom
  &:before
    border-color #25a4bb

  .search-content
    position: absolute
    left: 0
    right: 0
    bottom: 0
    overflow hidden
    top: 1.8rem
    background-color:#eee
    z-index 1
    .search-item
      line-height: .6rem
      padding-left: .2 rem
      color: #666
      background-color: #fff

</style>
